<template>
  <div class="map-box">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import Config from "@/utils/config.js";
import xwGeoJson from "@/utils/440825.json";

export default {
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      const mapboxgl = window.mapboxgl;
      const origin = [114.1646394695, 22.83444893398952];

      var simpleWebMapObject;

      new mapboxgl.flymap.SimpleWebMap(Config.styleId, {
        target: "map",
        portalUrl: Config.portalUrl,
        credentialValue: Config.credentialValue,
        successCallback: function (mapParams, webMap) {
          simpleWebMapObject = webMap;
          simpleWebMapObject.map.setZoom(9);
          simpleWebMapObject.map.setCenter([110.17675, 20.325489]);

          simpleWebMapObject.map.addSource("polygon", {
            type: "geojson",
            data: xwGeoJson,
          });
          simpleWebMapObject.map.addLayer({
            id: "polygon",
            source: "polygon",
            type: "fill",
            paint: {
              "fill-color": "#43D7B5",
              "fill-opacity": 0.5,
            },
          });

          var popup = new mapboxgl.Popup({ offset: 25 }).setText("徐闻县");
          var marker = new mapboxgl.Marker({
            draggable: false,
          })
            .setLngLat(simpleWebMapObject.map.getCenter())
            .setPopup(popup)
            .addTo(simpleWebMapObject.map);
          // let dragEnd = function () {
          //   let coor = marker.getLngLat();
          //   coordinates.style.display = "block";
          //   coordinates.innerHTML =
          //     "Longitude: " + coor.lng + "<br />Latitude: " + coor.lat;
          // };
          // marker.on("dragend", dragEnd);
        },
        errorCallback: function (e) {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 100%;

  .map {
    width: 100%;
    height: 100%;
  }
}
</style>
